<template>
  <div style="width: 100%; height: 100%">
    <el-upload
      v-if="videoStr==null || videoStr==''"
      class="avatar-uploader"
      :data="uploadData"
      :action="uploadImgUrl"
      :on-success="handleVideoSuccess"
      :before-upload="beforeUploadVideo"
      :show-file-list="false"
    >
      <i class="avatar-uploader-icon el-icon-video-camera" ><span class="vediotext">上传视频</span></i>
    </el-upload>
    <div class="videoForms" v-if="videoStr != null && videoStr != '' ">
      <video
      :src="videoStr"
      controls="controls"
      class="videoForm"
    >
      您的浏览器不支持视频播放
    </video>
    <span class="show" @click="onRemoveHandler">
      <i class="el-icon-delete"></i>
    </span>
    </div>
  </div>
</template>
<script>
import {getVideoUpToken} from "@/api/monitor/file";

const defaultForm = {};
export default {
  name: "videoCeshi",
  props: {
    videoStr: {
      type: String,
    },
  },
  data() {
    return {
      videoStrs: this.videoStr,
      postForm: Object.assign({}, defaultForm),
      merchantList: [],
      loading: false,
      // headers: {},
      rules: {},
      // 显示上传按钮
      videoForm: {
        showVideoPath: "",
      },
      uploadImgUrl: "https://upload-z2.qiniup.com",
      upload_domain: "",
      uploadData: {token: "", key: ""},
    };
  },
  computed: {
    headPreFix: function () {
      let params = window.localdicts.dicts.ph_params.systemParam;
      if (params.storageType === 1) {
        return params.storageUrl;
      }
      return this.$root.appBaseUrl;
    },
  },
  created() {
  },
  methods: {
    onRemoveHandler(index) {
      this.$confirm("确定删除该视频?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.videoStrs = null;
          this.$emit("update:videoStr", this.videoStrs);
        })
        .catch(() => {});
    },

    // 上传前回调
    beforeUploadVideo(file) {
      let fileSize = file.size / 1024 / 1024 < 8;
            if (
              [
                "video/mp4",
                "video/ogg",
                "video/flv",
                "video/avi",
                "video/wmv",
                "video/rmvb",
                "video/mov",
              ].indexOf(file.type) === -1
            ) {
              this.$message({
                type: "error",
                message: "请上传正确的视频格式",
              });
              file = {}
              return false;
            }
            if (!fileSize) {
              this.$message({
                type: "error",
                message: "视频大小不能超过8MB",
              });
              file = {}
              return false;
            }
      let _self = this;
      return new Promise((resolve, reject) => {
        getVideoUpToken()
          .then((response) => {
            _self.uploadData.key = response.data.key;
            _self.uploadData.token = response.data.token;
            _self.upload_domain = response.data.domain;
            resolve(true);

          })
          .catch((err) => {
            console.log("出错了...", err);
            reject(false);
          });
      });
    },
    // 上传成功回调
    handleVideoSuccess(res, file, fileList) {
      // 后台上传地址
      if (res.key) {
        this.videoForm.showVideoPath = this.upload_domain + res.key;
        let VideoPath = this.videoForm.showVideoPath;
        this.$emit("update:videoStr", VideoPath.toString());
      } else {
        this.$message({
          type: "error",
          message: "上传视频失败",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #999;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.show {
  display: none;
  font-size:18px;
  position: absolute;
  top: -5px;
  left: 78px;
}
.videoForm {
  width: 100px;
  height: 100px;
  display: inline-block;
}
.videoForms {
  width: 100px;
  height: 100px;
  // left: 110px;
  position: relative;
}
.videoForms:hover{
  cursor:pointer;
		.show {
			display:inline-block;
		}
	}
.vediotext{
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 100%;
  font-size: 13px;
  text-align: center;
}
</style>
